{% extends "sign_base.html" %}
{% load static %}

{% block style %}
    <style>
        .btn {
            text-decoration: none; /* 去掉下划线 */
        }

        .btn:hover {
            text-decoration: none; /* 去掉下划线 */
            color: #ff0000; /* 注册按钮在鼠标悬停时的样式，可以根据需要进行修改 */
        }
    </style>
{% endblock %}

{% block sign %}
    <div class="wrap">
        <div class="form">
            <div class="left">
                <!-- 使用静态文件加载视频 -->
                <video src="{% static 'bg.mp4' %}" muted loop autoplay></video>
            </div>
            <div class="right">
                <div class="right-con">
                    <h1>招聘注册</h1>

                    <form name="form1" method="post" action="/user/signup/">
                        {% csrf_token %}
                        <h3>用户名</h3>
                        <input class="text" type="text" name="user_name">
                        {{ forms.errors.user_name }}
                        <h3>密码</h3>
                        <input class="text" type="password" name="password">
                        {{ forms.errors.password }}
                        <h3>邮箱</h3>
                        <input class="text" type="email" name="email">
                        {{ forms.errors.email }}
                        <h3>电话号码</h3>
                        <input class="text" type="text" name="mobile_phone">
                        {{ forms.errors.mobile_phone }}  <!-- 这里应该显示 mobile_phone 字段的错误信息 -->
                        <h3>短信验证码</h3>
                        <input class="text" type="text" name="sms_code">
                        {{ forms.errors.sms_code }}
                        <button class="btn" type="button" onclick="sendSMSCode()">发送验证码</button>
                        <input class="btn" type="submit" value="注册">
                    </form>

                    <a href="/user/signin/" class="btn">登录</a>
                </div>
            </div>
        </div>
    </div>

    <script>
        function sendSMSCode() {
            var mobile_phone = document.getElementsByName("mobile_phone")[0].value;
            if (!mobile_phone) {
                alert("请填写手机号码");
                return;
            }

            // 发送 AJAX 请求到后端，触发发送短信验证码的功能
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/user/send_sms_code/");
            xhr.setRequestHeader("Content-Type", "application/json;charset=utf-8");
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        alert("短信验证码已发送，请注意查收");
                    } else {
                        alert("短信验证码发送失败，请稍后重试");
                    }
                }
            };
            xhr.send(JSON.stringify({ "mobile_phone": mobile_phone }));
        }
    </script>
{% endblock %}
